import React, { useEffect, useState } from 'react';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Layout, Menu, Breadcrumb, Popover, Button, Row, Avatar, Space, Spin, Modal } from 'antd';
import { ShoppingOutlined, LayoutOutlined, AreaChartOutlined, ToolOutlined, TeamOutlined, FileSearchOutlined } from '@ant-design/icons';
import { getToken } from '../services/token';
const { Header, Content, Sider } = Layout;

export default function Admin() {
    let [user, setUser] = useState({
        username: "admin"
    });

    let [load, setLoad] = useState(false);
    let [visible, setVisible] = useState(false);
    let navigate = useNavigate();
    let location = useLocation();
    let [pathSnippet, setPathSnippet] = useState([]);

    const showInfo = async () => {
        let { data } = await getToken();
        setUser(data);
        setLoad(true);
    };

    const handleReset = () => {
        setVisible(true);
    };

    const content = (
        <div>
            <Row>
                <Button>个人中心</Button>
                <Button onClick={handleReset}>退出登录</Button>
            </Row>
        </div>
    );

    useEffect(() => {
        showInfo();
    }, [user._id]);

    useEffect(() => {
        setPathSnippet(location.pathname.split("/"));
    }, [location.pathname])

    if (!load) {
        return (
            <div className='loading' >
                <Spin size="large" tip="加载中..." />
            </div>
        )
    }

    return (
        <Layout>
            <Modal title="退出登录" visible={visible} onOk={() => {
                localStorage.token = "";
                navigate('/login');
                setVisible(false);
            }} onCancel={() => { setVisible(false) }}>
                <p>确认退出?</p>
                <Link to='/login'>切换用户</Link>
            </Modal>
            <Header className="header">
                <div className="logo" >
                    <h1>
                        管理系统
                    </h1>
                </div>
                <div className='userinfo' style={{ cursor: "pointer" }}>
                    <Popover content={content} title={user.username} trigger="hover">
                        <Space>
                            {user.username}
                            <Avatar src="../images/horse.png" />
                        </Space>
                    </Popover>
                </div>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={[location.pathname === '/manage' ? '/manage' : location.pathname]}
                        style={{
                            height: '100%',
                            borderRight: 0,
                        }}
                        items={[
                            {
                                key: '/manage/user',
                                label: <Link to="/manage/user">用户管理</Link>,
                                icon: <TeamOutlined />
                            },
                            {
                                key: '/manage/order',
                                label: <Link to="/manage/order">订单管理</Link>,
                                icon: <FileSearchOutlined />
                            },
                            {
                                key: '/manage/commodity',
                                label: <Link to="/manage/commodity">商品管理</Link>,
                                icon: <ShoppingOutlined />
                            },
                            {
                                key: '/manage/classify',
                                label: <Link to="/manage/classify">类型管理</Link>,
                                icon: <LayoutOutlined />
                            },
                            {
                                key: '/manage/admin',
                                label: <Link to="/manage/admin">管理员设置</Link>,
                                icon: <ToolOutlined />
                            },
                            {
                                key: '/manage/census',
                                label: <Link to="/manage/census">统计</Link>,
                                icon: <AreaChartOutlined />
                            },
                        ]}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: '0 24px 24px',
                    }}
                >
                    <Breadcrumb
                        style={{
                            margin: '16px 0',
                        }}
                    >
                        {pathSnippet.map(item => {
                            if (item) {
                                if (item == "manage") {
                                    return <Breadcrumb.Item><Link to="/manage">主页</Link></Breadcrumb.Item>
                                } else if (item == "user") {
                                    return <Breadcrumb.Item><Link to="/manage/user">用户管理</Link></Breadcrumb.Item>
                                } else if (item == "order") {
                                    return <Breadcrumb.Item><Link to="/manage/order">订单管理</Link></Breadcrumb.Item>
                                } else if (item == "commodity") {
                                    return <Breadcrumb.Item><Link to="/manage/commodity">商品管理</Link></Breadcrumb.Item>
                                } else if (item == "classify") {
                                    return <Breadcrumb.Item><Link to="/manage/classify">类型管理</Link></Breadcrumb.Item>
                                } else if (item == "admin") {
                                    return <Breadcrumb.Item><Link to="/manage/admin">管理员设置</Link></Breadcrumb.Item>
                                } else {
                                    return <Breadcrumb.Item><Link to="/manage/census">统计</Link></Breadcrumb.Item>
                                }
                            }
                        })}
                    </Breadcrumb>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 574
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}
